<template>
  <div class="home">
    <div class="container">
      <!-- 服务器状态 -->
      <div v-reveal="{ delay: 50 }">
        <ServerStatus />
      </div>
      
      <!-- 特色功能 -->
      <section class="section" v-reveal="{ delay: 100 }">
        <h2 class="section-title">服务器特色</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="(feature, idx) in features" :key="feature.id">
            <el-card class="feature-card" shadow="hover" 
                     v-reveal="{ delay: 150 + idx * 70, distance: 24 }">
              <div class="feature-icon">
                <el-icon :size="40" color="#4CAF50">
                  <component :is="feature.icon" />
                </el-icon>
              </div>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </el-card>
          </el-col>
        </el-row>
      </section>
      
      <!-- 最新公告 -->
      <section class="section" v-reveal="{ delay: 100 }">
        <h2 class="section-title">最新公告</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" v-for="(news, idx) in latestNews" :key="news.id">
            <el-card class="news-card" shadow="hover" @click="viewNews(news.id)"
                     v-reveal="{ delay: 150 + idx * 100, distance: 24 }">
              <div class="news-content">
                <h3>{{ news.title }}</h3>
                <p class="news-date">{{ news.date }}</p>
                <p class="news-excerpt">{{ news.content.substring(0, 100) }}...</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="text-center" style="margin-top: 20px;">
          <el-button type="primary" @click="$router.push('/announcements')">
            查看所有公告
          </el-button>
        </div>
      </section>
      
      <!-- 服务器画廊 -->
      <section class="section" v-reveal="{ delay: 100 }">
        <h2 class="section-title">服务器画廊</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="(image, idx) in galleryImages" :key="image.id">
            <el-card class="gallery-card" shadow="hover" 
                     v-reveal="{ delay: 150 + idx * 80, distance: 24 }">
              <img :src="image.url" :alt="image.title" class="gallery-image" />
              <div class="gallery-overlay">
                <h3>{{ image.title }}</h3>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </section>
      
      <!-- 团队成员 -->
      <section class="section" v-reveal="{ delay: 100 }">
        <h2 class="section-title">团队成员</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="(staff, idx) in staffMembers" :key="staff.id">
            <el-card class="staff-card" shadow="hover"
                     v-reveal="{ delay: 150 + idx * 70, distance: 20 }">
              <div class="staff-avatar">
                <el-avatar :size="80" :src="staff.avatarUrl" />
              </div>
              <h3>{{ staff.name }}</h3>
              <p class="staff-role">{{ staff.role }}</p>
              <p class="staff-bio">{{ staff.bio }}</p>
            </el-card>
          </el-col>
        </el-row>
      </section>
      
      <!-- 快速链接 -->
      <section class="section" v-reveal="{ delay: 100 }">
        <h2 class="section-title">快速链接</h2>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6" v-for="(link, idx) in quickLinks" :key="link.id">
            <el-card class="link-card" shadow="hover" @click="openLink(link.url)"
                     v-reveal="{ delay: 150 + idx * 70, distance: 16 }">
              <div class="link-icon">
                <el-icon :size="30" color="#4CAF50">
                  <component :is="link.icon" />
                </el-icon>
              </div>
              <h3>{{ link.title }}</h3>
              <p>{{ link.description }}</p>
            </el-card>
          </el-col>
        </el-row>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Monitor, 
  
  Lightning, 
  
  Picture, 
  Bell,
  Link,
  Document,
  Download,
  Microphone
} from '@element-plus/icons-vue'
import ServerStatus from '../components/ServerStatus.vue'
import { getNewsData, getStaffData, getGalleryData } from '../api/serverApi'

export default {
  name: 'Home',
  components: {
    ServerStatus,
    Monitor,
    
    Lightning,
    
    Picture,
    Bell,
    Link,
    Document,
    Download,
    Microphone
  },
  setup() {
    const router = useRouter()
    const latestNews = ref([])
    const staffMembers = ref([])
    const galleryImages = ref([])

    const features = ref([
      {
        id: 1,
        title: 'LEAVES核心',
        description: '保留生电特性，支持红石机械和自动化系统',
        icon: 'Lightning'
      },
      {
        id: 2,
        title: '绝对平等',
        description: '无OP权限，所有玩家享受相同的游戏体验',
        icon: 'Shield'
      },
      {
        id: 3,
        title: '死亡不掉落',
        description: '死亡后物品不会掉落，安心探索世界',
        icon: 'Monitor'
      },
      {
        id: 4,
        title: '微插件支持',
        description: '皮肤、传送、恢复等实用功能',
        icon: 'Users'
      },
      {
        id: 5,
        title: '双版本互通',
        description: 'Java版和基岩版玩家可以一起游戏',
        icon: 'Link'
      },
      {
        id: 6,
        title: '活跃社区',
        description: '友好的玩家社区，定期举办活动',
        icon: 'Users'
      }
    ])

    const quickLinks = ref([
      {
        id: 1,
        title: 'QQ群',
        description: '加入玩家交流群',
        url: 'https://qm.qq.com/q/nLG9o7UMwg',
        icon: 'Users'
      },
      {
        id: 2,
        title: '教程文档',
        description: '查看游戏教程',
        url: 'https://docs.qq.com/aio/DZWJLeWxnQU9KVXNt',
        icon: 'Document'
      },
      {
        id: 3,
        title: '资源下载',
        description: '下载游戏资源',
        url: 'https://www.123865.com/s/anDgTd-ZyiUH',
        icon: 'Download'
      },
      {
        id: 4,
        title: '语音频道',
        description: '加入语音聊天',
        url: 'https://oopz.cn/i/A8eMHK',
        icon: 'Microphone'
      }
    ])

    const viewNews = (id) => {
      router.push(`/announcements/${id}`)
    }

    const openLink = (url) => {
      window.open(url, '_blank')
    }

    onMounted(() => {
      latestNews.value = getNewsData().slice(0, 2)
      staffMembers.value = getStaffData()
      galleryImages.value = getGalleryData()
    })

    return {
      features,
      latestNews,
      staffMembers,
      galleryImages,
      quickLinks,
      viewNews,
      openLink
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px 0;
}

.section {
  margin: 40px 0;
}

.section-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  color: #4CAF50;
}

.feature-card {
  text-align: center;
  padding: 30px 20px;
  height: 100%;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  margin-bottom: 20px;
}

.feature-card h3 {
  color: #4CAF50;
  margin-bottom: 15px;
}

.news-card {
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
}

.news-card:hover {
  transform: translateY(-3px);
}

.news-content h3 {
  color: #4CAF50;
  margin-bottom: 10px;
}

.news-date {
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.news-excerpt {
  color: #666;
  line-height: 1.6;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.gallery-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-card:hover .gallery-image {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.gallery-card:hover .gallery-overlay {
  transform: translateY(0);
}

.staff-card {
  text-align: center;
  padding: 30px 20px;
  height: 100%;
}

.staff-avatar {
  margin-bottom: 20px;
}

.staff-card h3 {
  color: #4CAF50;
  margin-bottom: 10px;
}

.staff-role {
  color: #666;
  font-weight: bold;
  margin-bottom: 15px;
}

.staff-bio {
  color: #999;
  line-height: 1.6;
}

.link-card {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
}

.link-card:hover {
  transform: translateY(-3px);
}

.link-icon {
  margin-bottom: 15px;
}

.link-card h3 {
  color: #4CAF50;
  margin-bottom: 10px;
}

.link-card p {
  color: #666;
}

.text-center {
  text-align: center;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
  }
  
  .feature-card,
  .news-card,
  .gallery-card,
  .staff-card,
  .link-card {
    margin-bottom: 20px;
  }
}
</style> 